<template>
  <div class="references-section">
    <div class="references-inline-header">
      <i class="el-icon-collection"></i>
      <span class="references-inline-label">引用</span>
    </div>
    <div class="references-chip-list">
      <button 
        v-for="group in groupedReferences" 
        :key="group.id" 
        class="reference-chip"
        @click="handleClickReference(group)">
        <i class="el-icon-document"></i>
        <span class="chip-name">{{ group.name }}</span>
      </button>
    </div>
  </div>
</template>

<script>
export default {
  name: 'ReferencesChips',
  props: {
    references: {
      type: Array,
      required: true,
      default: () => []
    }
  },
  computed: {
    groupedReferences() {
      if (!this.references || this.references.length === 0) {
        return []
      }
      
      // 按文件名/来源聚合，避免同一材料重复显示
      const groups = []
      const nameToId = {}
      
      this.references.forEach((resource, idx) => {
        const name = this.getResourceName(resource, idx)
        
        if (nameToId[name] === undefined) {
          const id = groups.length
          nameToId[name] = id
          groups.push({ 
            id, 
            name, 
            indices: [idx],
            resources: [resource]
          })
        } else {
          groups[nameToId[name]].indices.push(idx)
          groups[nameToId[name]].resources.push(resource)
        }
      })
      
      return groups
    }
  },
  methods: {
    getResourceName(resource, idx) {
      return (
        resource.document_name || 
        resource.document_title || 
        (resource.metadata && (
          resource.metadata.filename || 
          resource.metadata.source || 
          resource.metadata.title
        )) || 
        resource.dataset_name || 
        `参考${idx + 1}`
      )
    },
    handleClickReference(group) {
      this.$emit('open-references', group.resources)
    }
  }
}
</script>

<style lang="scss" scoped>
/* 引用和归属 - 文件名芯片式（点击弹窗） */
.references-section {
  margin-top: 10px;
  border: 1px dashed #cfe5ff;
  border-radius: 8px;
  padding: 10px;
  background: #f8fbff;
}
.references-inline-header {
  display: flex;
  align-items: center;
  gap: 6px;
  color: #2563eb;
  font-weight: 700;
  margin-bottom: 8px;
  font-size: 12px;
}
.references-inline-label { 
  letter-spacing: 2px; 
}
.references-chip-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.reference-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 10px;
  border: 1px solid #e1eaff;
  background: #fff;
  color: #1f2937;
  border-radius: 8px;
  cursor: pointer;
  transition: all .2s;
}
.reference-chip:hover {
  background: #f1f6ff;
  border-color: #bfd6ff;
  transform: translateY(-1px);
}
.reference-chip .chip-name {
  white-space: normal;
  word-break: break-all;
}
.reference-chip.view-all {
  background: #f9fafb;
  border-style: dashed;
}
</style>

